<style>

        .left-menu::-webkit-scrollbar {
            width: 0px;
        }

        .main {
            overflow: hidden;
            margin: -50px 0 0 0px;
            width: 1140px;
            height: auto;
        }

        .left-menu {
            width: 200px;
            float: left;
            background-color: #eee;
            position: relative; /*overflow-y:scroll;*/
        }

        .left-menu ul li {
            line-height: 50px;
            width: 200px;
            text-align: center;
            font-size: 14px;
            padding: 3px 0;
            color: #333;
            border-bottom: 1px dashed #ddd;
        }

        .left-menu ul li:hover {
            background: #fa4b2a;
            width: 200px;
            height: 50px;
        }

        .left-menu ul li a:hover {
            font-family: miaomi;
            color: #ffffff;
            font-style: bold;
            font-size: 20px;
        }

        .left-menu ul li a {
            text-decoration: none;
            color: #555;
            font-family: miaomi;
            text-align: center;
            font-size: 16px;
        }

        .left-menu ul li.active {
            color: #FFFFFF !important;
            background-color: #fa4b2a;
            width: 200px;
            height: 50px;
            font-family: miaomi;
            font-style: bold;
            font-size: 20px;
        }

        .right-con {
            display: none;
            width: 75%;
            float: left; /*overflow-y:scroll;*/
            background: #fff;
            position: relative;
            height: 500px;
        }

        .con .con-active {
            display: block;
            width: 940px;
        }

        .right-con li {
            position: relative;
            height: 150px;
            width: 430px;
            height: auto;
            float: left;
            display: inline;
            margin-top: 20px;
            margin-left: 30px;
        }

        .right-con li .menu-txt {
            margin: -80px 0 0 200px; 
        }

        .right-con li .menu-txt h4 {
            margin-bottom: 10px;
            margin-top: 1px;
            font-family: miaomi;
            font-size: 24px;
            font-style: bold;
        }

        .right-con li .menu-txt p {
            font-style: normal;
            line-height: 20px;
            font-size: 12px;
            vertical-align: bottom;
            margin-top: 25px;
        }

        .right-con li .menu-txt p.list2 b {
            font-family: miaomi;
            font-size: 21px;
            font-style: bold;
            color: #fa4b2a;
        }

        .right-con li .btn {
            background-color: transparent;
            position: absolute;
            right: 0px;
            top: 45%;
            cursor: pointer;
            padding: 3px;
            height: 38px;
        }

        .right-con li .btn button.minus {
            margin-right: -10px;
            display: none;
        }

        .right-con li .btn button {
            width: 40px;
            height: 40px;
            border: 0;
            background: transparent;
            padding: 0;
        }

        .right-con li .btn button strong {
            padding: 5px 10px;
            font-size: 15px;
            display: inline-block;
            text-indent: -100px;
            padding: 5px 11px;
            height: 22px;
        }

        .right-con li .btn button.minus strong {
            background: url(__PUBLIC__/static/home/images/down.png) no-repeat;
            background-size: 22px 22px;
        }

        .right-con li .btn i {
            display: none;
            width: 22px;
            text-align: center;
            font-style: normal;
            vertical-align: top;
            margin-top: 11px;
            line-height: 18px;
        }

        .right-con li .btn button.add {
            margin-left: -10px;
        }

        .right-con li .btn button.add strong {
            background: url(__PUBLIC__/static/home/images/up.png) no-repeat;
            background-size: 22px 22px;
        }

        .right-con li .btn .price {
            display: none;
        }

        .footer {
            display: block;
            position: relative;
            width: 1140px;
            z-index: 3;
            bottom: 0px;
            color: #f03c03;
            border:3px solid #ee2600;
            font-size: 15px;
            background: #fff;
            height: 10px;
        }

        .footer .left {
            float: left;
            margin: -10px 0 0 250px;
            font-family: miaomi;
            font-size: 22px;
        }

        .footer .right {
            float: right;
        }

        .footer .right .disable {
            background: #f9826b;
            width: 120px;
            height: 50px;
            margin: -30px 20px 0 0;
        }
         
        .footer .xhlbtn {
            display: block;
            padding: 10px 20px;
            color: #fff;
            font-weight: bold;
            font-family: miaomi;
            font-size: 25px;
            background-color:#ee2600;
            margin: -30px 20px 0 0;
        }
    </style>


    <script type="text/javascript">
        $(function () {
            //加的效果
            $(".add").click(function () {
                $(this).prevAll().css("display", "inline-block");
                var n = $(this).prev().text();
                var num = parseInt(n) + 1;
                if (num == 0) {
                    return;
                }
                $(this).prev().text(num);
                var danjia = $(this).next().text();//获取单价
                var a = $("#totalpriceshow").html();//获取当前所选总价
                $("#totalpriceshow").html((a * 1 + danjia * 1).toFixed(2));//计算当前所选总价

                var nm = $("#totalcountshow").html();//获取数量
                $("#totalcountshow").html(nm * 1 + 1);
                jss();//<span style='font-family: Arial, Helvetica, sans-serif;'></span>   改变按钮样式
            });
            //减的效果
            $(".minus").click(function () {
                var n = $(this).next().text();
                var num = parseInt(n) - 1;

                $(this).next().text(num);//减1

                var danjia = $(this).nextAll(".price").text();//获取单价
                var a = $("#totalpriceshow").html();//获取当前所选总价
                $("#totalpriceshow").html((a * 1 - danjia * 1).toFixed(2));//计算当前所选总价

                var nm = $("#totalcountshow").html();//获取数量
                $("#totalcountshow").html(nm * 1 - 1);
                //如果数量小于或等于0则隐藏减号和数量
                if (num <= 0) {
                    $(this).next().css("display", "none");
                    $(this).css("display", "none");
                    jss();//改变按钮样式
                    return
                }
            });
            function jss() {
                var m = $("#totalcountshow").html();
                if (m > 0) {
                    $(".right").find("a").removeClass("disable");
                } else {
                    $(".right").find("a").addClass("disable");
                }
            };
            //选项卡
            $(".con>div").hide();
            $(".con>div:eq(0)").show();

            $(".left-menu li").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                var n = $(".left-menu li").index(this);
                $(".left-menu li").index(this);
                $(".con>div").hide();
                $(".con>div:eq(" + n + ")").show();
            });
        });
    </script>
